<template>
	<!-- 纵向列表组件 -->
	<view class="">
		<view class="center flexRowCenter mt32 mb24 flex" v-if="showTopTitle">
			<u-line length="28rpx" color="#666"></u-line>
			<text style="color: #666;margin: 0 20rpx;">为你推荐</text>
			<u-line length="28rpx" color="#666"></u-line>
		</view>
		<view class="container">
			<view class="left">
				<view class="lis relative" v-for="(item,index) in leftList"  @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)">
					<image :src="item.image" :lazy-load="false" width="100%" mode="widthFix" :showLoading="true" style="display: block;width: 100%;"></image>
					<div class='country' v-if="showCountry">
						{{item.delivery_address}}
					</div>
					<view class="bottomBox">
						<view class="goodsname fontS28 elipes2">{{item.product_name}}</view>
						<view class="wantbuynum fontS24" v-if="showwant">
							{{item.browse }}人想买
						</view>
						<view class="flex"  style="flex-wrap: wrap;">
							<view class="baoyou fontS20 fuzhucolor " v-for="(itemm,indexx) in item.labelText" >
								{{itemm}}
							</view>
						</view>
						<view class="unitPrice flexJBC" >
							<view class="flex">
								<view>
									<text>￥</text> 
									<text>{{item.price}}</text>
								</view> 
								<view class="co9 fontS20" style="text-decoration: line-through;margin-left: 12rpx;">
									￥{{item.ot_price}}
								</view>
							</view>
							<view class="more" v-if="!showSale">
								<!-- <view class="">.</view>
								<view class="">.</view>
								<view class="">.</view> -->
							</view>
						</view>
						<view class="flexJBC" style="margin-top: 8rpx;" v-if="showSale">
							<view class="fontS18 co9">
								月销售{{item.sales}} 
							</view>
							<view class="more">
								<view class="">.</view>
								<view class="">.</view>
								<view class="">.</view>
							</view>
						</view>
					</view>
				</view>
			</view> 
			<view class="right">
				<view class="lis relative" v-for="(item,index) in rightList"  @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)">
				<image :src="item.image" :lazy-load="false" width="100%" mode="widthFix" :showLoading="true" style="width: 100%;display: block;"></image>
				<div class='country' v-if="showCountry">
					{{item.countries}}
				</div>
				<view class="bottomBox">
					<view class="goodsname fontS28 elipes2">{{item.product_name}}</view>
					<view class="wantbuynum fontS24" v-if="showwant">
						{{item.browse }}人想买
					</view>
					<view class="flex"  style="flex-wrap: wrap;">
						<view class="baoyou fontS20 fuzhucolor " v-for="(itemm,indexx) in item.labelText">
							{{itemm}}
						</view>
					</view>
					<view class="unitPrice flexJBC" >
						<view class="flex">
							<view>
								<text>￥</text> 
								<text>{{item.price}}</text>
							</view> 
							<view class="co9 fontS20" style="text-decoration: line-through;margin-left: 12rpx;">
								￥{{item.ot_price}}
							</view>
						</view>
						<!-- <view class="more" v-if="!showSale">
							<view class="">.</view>
							<view class="">.</view>
							<view class="">.</view>
						</view> -->
					</view>
					<view class="flexJBC" style="margin-top: 8rpx;" v-if="showSale">
						<view class="fontS18 co9">
							月销售{{item.sales}}
						</view>
						<view class="more">
							<view class="">.</view>
							<view class="">.</view>
							<view class="">.</view>
						</view>
					</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0,
				
				leftList: [],
				rightList: [],
			}
		},
		props: {
			showCountry:{  //是否显示国家
				default:false
			},
			showwant:{  //是否显示多少人想买
				default:true
			},
			showSale:{ //显示销售数量
				default:true
			}, 
			list: { //列表
				default: [],
			},
			type: {
				default: 1, //1是首页  2是严选  3是首页找新品上新精选 4是相似 
			},
			showTopTitle: {
				default: true
			}
		},
		watch:{
			list(newval,oldval){
				let newarray=JSON.parse(JSON.stringify(newval));
			    let arr=newarray.splice(oldval.length,newval.length-1)
				let that=this;
					arr.forEach((res,index) => {
						// 获取图片宽高
						uni.getImageInfo({
							src: res.image,
							success: (image) => {
								// 计算图片渲染高度
								let showH = (50 * image.height) / image.width
								// 判断左右盒子高度
								if (that.leftH <= that.rightH) {
									that.leftList.push(res)
									that.leftH += showH
								} else {
									that.rightList.push(res)
									that.rightH += showH
								}
							}
						}) 
					}) 
			}
		},
		
		mounted() {
			let that=this;
			this.list.forEach(res => {
				// 获取图片宽高
				uni.getImageInfo({
					src: res.image,
					success: (image) => {
						// 计算图片渲染高度
						let showH = (50 * image.height) / image.width
						// 判断左右盒子高度
						if (that.leftH <= that.rightH) {
							that.leftList.push(res)
							that.leftH += showH
						} else {
							that.rightList.push(res)
							that.rightH += showH
						}
					}
				})
			})
		}
	}
</script>

<style lang="scss" scoped>
	.country{
		position: absolute;
		top:20rpx;
		right:36rpx;
		z-index: 9;
		height: 36rpx;
		line-height: 36rpx;
		color: #6B5ACD;
		font-size: 20rpx;
		background: linear-gradient(0deg, #F5E9FF, #F5E9FF), #F5E9FF;
		border-radius: 18rpx;
		padding: 0 10rpx;
		
		
	}
	.baoyou {
		border: 1rpx solid $fuzhuColor;
		border-radius: 8rpx;
		padding: 0 5rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		height: 28rpx;
		line-height: 26rpx;
		margin-right: 10rpx;
	}

	.container {

		.left,
		.right {
			width: 48%;
		}

		display: flex;
		// display: flex;
		justify-content: space-between;
		// flex-wrap: wrap;

		.lis {
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 20rpx;

			.bottomBox {
				background: #fff;
				padding: 20rpx 16rpx;
				box-sizing: border-box;
				border-radius: 0 0 20rpx 20rpx;

				.goodsname {
					color: #000;
					line-height: 39rpx;
				}

				.wantbuynum {
					color: #999;
					margin: 12rpx 0;
				}

				

				.more {
					line-height: 8rpx;
					text-align: center;
					color: #999;
				}
			}
		}
	}
</style>
